<template>
  <view class="module-goods-list-detail" :style="'background-image: url('+(moduleData.module_background_image||'')+');'">
    <view v-for="(item, index) in moduleData.content_list" :key="index" class="item-block" :style="'width: '+(100/moduleData.show_num) + '%'">
      <goods-item
        :goods-data="item"
        layout="vertical"
        image-width="100%"
        :size="['normal', 'large', 'middle', 'normal'][moduleData.show_num]"
        :show-sub-name="moduleData.show_num < 2 ? true : false"
        :show-market-price="moduleData.show_num < 3 ? true : false"
        :name-line="1"></goods-item>
    </view>
  </view>
</template>
<script>
import goodsItem from '@/components/goodsItem/index.vue'
export default {
  name: 'GoodsListDetail',
  components: {
    goodsItem
  },
  props: {
    moduleData: {
      type: Object,
      default() {
        return {
          show_num: 1,
          content_list: []
        }
      }
    }
  },
  data() {
    return {
      screenWidth: 375
    }
  }
}
</script>
<style lang="scss">
.module-goods-list-detail{
  padding: 12rpx 16rpx;
  background-size: cover;

  .item-block{
    padding: 12rpx;
    display: inline-block;
    box-sizing: border-box;

    .c-goods-item,
    goods-item > view{
      padding: 12rpx;
      background: #fff;
      border-radius: 8rpx;
    }
  }
}
</style>
